<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>返回顶部按钮动画</title>
	<style type="text/css">
		li {
			display: block;
			height: 50px;
		}
		#back {
			position: fixed;
			right: 30px;
			top: 30px;
			width: 80px;
			height: 22px;
			text-align: center;
			border: 1px solid gray;
    		border-radius: 2px;
			background: #e5eaff;
		}
	</style>
</head>
<body>
	<div id="container">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
			<li>32</li>
			<li>33</li>
			<li>34</li>
			<li>35</li>
			<li>36</li>
			<li>37</li>
			<li>38</li>
			<li>39</li>
			<li>40</li>
			<li>41</li>
			<li>42</li>
			<li>43</li>
			<li>44</li>
			<li>45</li>
			<li>46</li>
			<li>47</li>
			<li>48</li>
			<li>49</li>
			<li>50</li>
		</ul>
		<div id="back" class="">
			<span>返回顶部</span>
		</div>
	</div>

	<script type="text/javascript" src="jquery-2.1.4.js"></script>
	<script type="text/javascript" src="jquery.easing.js"></script>
	<!-- 自定义节流器 -->
	<script type="text/javascript" src="throttle.js"></script>
	<script type="text/javascript">
		// 返回顶部按钮动画
		function moveScroll() {
			var top = $(document).scrollTop();
			$('#back').animate({top: top}, 400, 'easeOutCubic');
		}
		// 监听页面滚动条事件
		$(window).on('scroll', () => {
			// 不使用节流器的效果
			// moveScroll();
			// 节流执行返回顶部按钮动画
			throttle(moveScroll);
		});
	</script>
</body>
</html>